<template>
  <div id="introduced" class="clear">
    <swipers></swipers>
    <div class="bgColor-fff padding-tb20">
      <p class="title">{{specials.name}}</p>
      <p class="time">{{specials.briefly}}</p>
    </div>
    <div class="orderBusiness bgColor-fff padding-tb20 margin-t20">
      <div class="orderBusiness-details clear">
        <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" class="fl icon_user">
        <div class="fl content">
          <p class="title">{{specials.name}}</p>
          <p class="money"><span>{{specials.city}}</span><span> {{specials.area}}</span></p>
        </div>
        <img src="../../../../static/images/icon/icon-right.png" class="icon_right fr">
      </div>
    </div>
    <!--活动详情-->
    <div class="bgColor-fff padding-tb20 margin-t20">
      <div class="activities">
        <p class="padding-tb20"><span class="span">活动详情</span></p>
      </div>
      <p>欢迎来到布后.何去慢生活空间—— 一个养心养身的小院。希望您能喜欢这里远离喧嚣的宁静；喜欢被三面荷塘环绕和比邻的小河； 喜欢不远处时不时驶过的火车以及那翱翔的只只白鹭，喜欢如此浑然天成的乡间野趣。</p>
      <p>也许您我早已熟悉，更多可能我们还未曾谋面，期待有缘成为朋友。</p>
      <img src="../../../../static/images/business/business-10.jpg">
      <p>布后.何去慢生活空间以“七星伴月”为建筑格局，力图营造一种安逸、闲适、清雅的格调——石瓦墙、茅草顶、木格亭、会随季节变化的亚麻绳等等，都是运用接近自然元素的材料建造，这也是与布后.何去的生活理念遥相呼应</p>
      <img src="../../../../static/images/business/business-11.jpg">
      <p>落英夹道,7个大小不一的主题茅亭品、悟、享、乐、荷欢、荷趣、荷韵还有2间川西风格的瓦房坐于莲上每个包间独具特点</p>
      <img src="../../../../static/images/business/business-12.jpg">
      <p>后.何去慢生活空间以“七星伴月”为建筑格局，力图营造一种安逸、闲适、清雅的格调——石瓦墙、茅草顶、木格亭、会随季节变化的亚麻绳等等，都是运用接近自然元素的材料建造，这也是与布后.何去的生活理念遥相呼应</p>
    </div>
    <!--购买须知-->
    <div class="bgColor-fff margin-t20 padding-tb20">
      <div class="notice">购买须知<span></span></div>
      <div class="notice-content">
        <p class="notice-title">有效期</p>
        <p class="notice-detailed"><span>•</span>{{specials.validity}}</p>
        <p class="notice-title">预约信息</p>
        <p class="notice-detailed"><span>•</span>{{specials.appointmentInformation}}</p>
        <p class="notice-title">规则提醒</p>
        <p class="notice-detailed"><span>•</span>{{specials.rules}}</p>
        <!--<p class="notice-detailed"><span>•</span>不再与其他优惠同享</p>-->
        <p class="notice-title">商家服务</p>
        <p class="notice-detailed"><span>•</span>提供免费Wife</p>
        <p class="notice-detailed"><span>•</span>商家提供停车位</p>
        <p class="notice-title">温馨提示</p>
        <p class="notice-detailed"><span>•</span>{{specials.warmTips}}</p>
      </div>
    </div>
    <div class="copyRight">
      <div class="copyRight-name">找玩网</div>
      <div class="copyRight-name">五朵云.休闲农旅全场景运营服务商 版权所有</div>
    </div>
    <div style="height: 90rpx"></div>
    <div v-if="!isBuy" class="buy bgColor-fff clear"><div class="fl">￥{{specials.money}}</div><!--<span class="fl">原价760</span>--><label class="fr" @click="buy();">购买</label></div>
    <div v-if="isBuy" class="buy bgColor-fff clear noBuy">已下架</div>
    <!--弹出层 {on:index==num} hide{{showView?'show':''}}-->
    <div class="mask" :class="{showView:showView==true}"></div>
    <scroll-view scroll-y :class="{showView:showView==true}">
      <div class="showModal">
        <div class="show-content">
          <div class="show-title clear">
            <img src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" class="fl icon_user">
            <div class="fl content">
              <div class="title">{{specials.name}}</div>
              <div class="money"><label class="current">￥<span>{{specials.money}}</span></label><!--<span class="price">原价300元</span>--></div>
            </div>
            <img src="../../../../static/images/icon/icon-close.png" class="icon_close fr" @click="close();">
          </div>
          <div v-show="!orderState">
            <div class="show-validity">
              <div class="title">有效期：</div>
              <span v-for="item in validity" :key="index" @click="validitys(index,item.time)" :class="{on:index==timeIndex}">{{item.time}}</span>
            </div>
            <div class="show-number clear">
              <div class="title fl">购买数量：<span>每人限购3份</span></div>
              <div class="fr operation">
                <img src="../../../../static/images/icon/icon-less.png" class="fl" @click="less(num);">
                <span class="fl num">{{num}}</span>
                <img src="../../../../static/images/icon/iocn-add.png"  class="fl" @click="add(num);">
              </div>
            </div>
            <div class="user-name clear"><label class="fl"><span>*</span>联系人：</label><input v-model="userName" type="text" name="" id="" class="fl" placeholder="请输入联系人姓名"></div>
            <div class="user-iphone clear"><label class="fl"><span>*</span>手机号：</label><input v-model="userIphone"  type="number" name="" id="" class="fl" maxlength="11" placeholder="请输入联系人手机号"></div>
          </div>
          <div v-show="orderState">
            <div class="pay-order">
              <div>有效期：<span>{{timeValue}}</span></div>
              <div>联系人：<span>{{userName}}</span></div>
              <div>手机号：<span>{{userIphone}}</span></div>
            </div>
            <div class="pay-order">
              <div>商品单价：<span>￥{{specials.money}}</span></div>
              <div>商品数量：<span>x{{num}}</span></div>
              <div>商品总价：<span>￥{{priceAll}}</span></div>
              <!--<div>总  折  扣：<span class="">-100</span></div>-->
            </div>
            <div class="pay-money">
              <div class="order-money">￥{{priceAll}}</div>
              <div class="order-name">订单总价</div>
              <div class="order-updata" @click="orderUpdata();">﹤修改订单信息</div>
            </div>
          </div>
        </div>
        <div style="height: 100rpx"></div>
        <div v-show="!orderState" class="pay-confirm" @click="payConfirm();">确认</div>
        <div v-show="orderState" class="pay-confirm">支付</div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import swipers from '../../../components/swipers'

  export default {
    name: "goodsDetails",
    data () {
      return {
        orderState: false,
        showView: false,
        isBuy: false,
        timeIndex: null,
        timeValue: "",
        specials:{},
        num: 1,
        price: "",
        priceAll: "",
        validity: [
          {
            time: "2018-05-06"
          },{
            time: "2018-05-07"
          },{
            time: "2018-05-08"
          },{
            time: "2018-05-09"
          },
        ],
        userName: "",
        userIphone: "",
      }
    },
    components: {
      swipers
    },
    methods: {
      getUserInfo () {

      },
      goodsDetails: function () {
        wx.navigateTo({
          url: '/pages/hot/goods/main',
          success: function(){},       //成功后的回调；
          fail: function(){},          //失败后的回调
          complete: function(){}      //结束后的回调(成功，失败都会执行)
        });
      },
      close: function() {
        this.showView = false;
      },
      buy: function () {
        this.showView = true;
      },
      validitys: function (index, time) {
        this.timeIndex = index;
        this.timeValue = time;
      },
      add: function (num) {
        if(num<3) {
          this.num = num+1;
          this.priceAll = this.price * this.num;
        }else  {
          wx.showToast({
            title: '已到限购上限',
            icon: 'none',
            duration: 1000
          })
        }
      },
      less: function (num) {
        if(num>1) {
          this.num = num-1;
          this.priceAll = this.price * this.num;
        }
      },
      payConfirm: function () {
        if(this.timeIndex == null) {
          wx.showToast({
            title: '请选择有效期',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        if(!this.userName) {
          wx.showToast({
            title: '请输入联系姓名',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if(!reg.test(this.userIphone)){
          wx.showToast({
            title: '请输入正确的手机号码',
            icon: 'none',
            duration: 1000
          });
          return;
        }
        this.orderState = true;
      },
      orderUpdata: function () {
        this.orderState = false;
      }
    },
    onLoad: function(option) {
      /*初始化*/
      this.num = 1;
      var type = option.type;
      var urlId = option.urlId;
      this.orderState = false;
      this.showView = false;
      this.isBuy = false;
      if(type =="") {
        for (var k = 0, length = this.$store.state.order.length; k < length; k++) {
          if(this.$store.state.order[k].type == urlId) {
            this.specials = this.$store.state.order[k];
            this.price = this.specials.money;
            this.priceAll = this.specials.money;
            return;
          }
        }
      }else  {
        for (var k = 0, length = this.$store.state.business.length; k < length; k++) {
          if(this.$store.state.business[k].merchantType == type) {
            for(var j = 0, lengths = this.$store.state.business[k].merchantNumber.length; j< lengths; j++) {
              if(this.$store.state.business[k].merchantNumber[j].id == urlId) {
                this.specials = this.$store.state.business[k].merchantNumber[j];
                // console.log(JSON.stringify(this.specials));
                this.price = this.specials.money;
                this.priceAll = this.specials.money;
                return;
              }
            }
          }
        }
      }


      // if (urlId ==1) {
      //   this.isBuy = true;
      // }else  {
      //   this.isBuy = false;
      // }
    },
    onShow: function() {

    },
    computed: {
      count() {

      },
    },
    created() {
      this.getUserInfo();
    }
  }
</script>

<style scoped lang=scss>
  @import "../../../../static/css/index.css";
  $color-666: #666666;
  $color-fff: #ffffff;
  $color-333: #333333;
  $color-999: #999999;
  $color-c2: #c2c2c2;
  $color-3e: #3e3e3e;
  $color-red: #ff2865;
  $color-lightGreen: #74f1d8;
  #introduced {
    //background: $color-fff;
  }
  p {
    color: $color-666;
    font-size: 28rpx;
    padding: 30rpx 0;
    line-height: 50rpx;
    text-indent: 2em;
    &.title {
      color: $color-333;
      font-size: 34rpx;
      text-indent: 0;
    }
    &.time {
      color: $color-999;
      font-size: 24rpx;
      padding: 10rpx 0;
      text-indent: 0;
    }
  }
  img {
    width: 100%;
  }
  .activities {
    height: 94rpx;
    line-height: 94rpx;
    font-size: 36rpx;
    text-align: center;
    p {
      border-bottom: 1rpx solid #f9f9f9;
      position: relative;
      .span {
        color: #57d9bf;
        overflow: hidden;
        background: $color-fff;
        z-index: 2;
        position: relative;
        font-weight: bolder;
      }
      &::after {
        content: '';
        display: block;
        width: 40rpx;
        height: 2rpx;
        background: #57d9bf;
        position: absolute;
        float: left;
        left: 270rpx;
        top: 56rpx;
      }
      &::before {
        content: '';
        display: block;
        width: 40rpx;
        height: 2rpx;
        background: #57d9bf;
        position: absolute;
        float: right;
        right: 210rpx;
        top: 56rpx;
      }
    }
  }
  .notice {
    height: 72rpx;
    line-height: 72rpx;
    background-color: #57d9bf;
    text-align: center;
    color: $color-fff;
    font-size: 36rpx;
    position: relative;
    z-index: 0;
    span {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      background: #57d9bf;
      top: 40rpx;
      transform:rotate(45deg);
      -ms-transform:rotate(45deg);
      -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
      -o-transform:rotate(45deg);
      left: 50%;
      margin-left: -30rpx;
      z-index: -1;
      float: left;
    }
  }
  .notice-content {
    padding: 40rpx 0;
    p {
      line-height: 26rpx;
      padding: 10rpx 20rpx;
      text-indent: initial;
    }
    .notice-title {
      font-size: 26rpx;
      color: $color-999;
      margin-top: 15rpx;
    }
    .notice-detailed {
      font-size: 26rpx;
      color: $color-333;
      span  {
        color: #57d9bf;
        padding: 0 10rpx;
        display: inline-block;
      }
    }
  }
  .buy {
    height: 90rpx;
    line-height: 90rpx;
    color: #ff2865;
    font-size: 44rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    span {
      color: $color-999;
      font-size: 28rpx;
      display: inline-block;
      line-height: 90rpx;
      text-decoration:line-through;
      margin-left: 50rpx;
    }
    label {
      display: inline-block;
      width: 210rpx;
      background: #57d9bf;
      text-align: center;
      color: $color-fff;
      font-size: 36rpx;
    }
    > div {
      margin-left: 50rpx;
    }
    &.noBuy {
      font-size: 24rpx;
      color: $color-666;
      text-align: center;
      background-color: #bababa;
    }
  }
  /*弹出层*/
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    display: none;
  }
  scroll-view{
    position:fixed;
    width:100%;
    bottom:0;
    height:1000rpx;
    background:#ffffff;
    display: none;
    z-index: 10;
  }
  .showModal {
    background: $color-fff;
    border-top-left-radius:20rpx;
    border-top-right-radius:20rpx;
    /*弹出层内容*/
    .show-content {
      padding: 0 40rpx;
      .show-title {
        height: 160rpx;
        border-bottom: 1rpx solid $color-c2;
        .icon_user {
          width: 100rpx;
          height: 100rpx;
          margin-top: 30rpx;
        }
        .content {
          margin-top: 30rpx;
          width: 450rpx;
          margin-left: 40rpx;
          display: inline-block;
          .title {
            width:450rpx;
            overflow: hidden;/*超出部分隐藏*/
            white-space: nowrap;/*不换行*/
            text-overflow:ellipsis;/*超出部分文字以...显示*/
            color: $color-3e;
            font-size: 30rpx;
            margin-top: 8rpx;
          }
          .money {
            margin-top: 5rpx;
            color: $color-999;
            font-size: 24rpx;
            span {
              margin-right: 20rpx;
            }
            .price {
              text-decoration:line-through
            }
            .current {
              color: $color-red;
              font-size: 24rpx;
              span {
                font-size: 36rpx;
              }
            }
          }
        }
        .icon_close {
          width: 50rpx;
          height: 50rpx;
          position: absolute;
          right:40rpx;
          top:20rpx;
        }
      }
      .show-validity {
        border-bottom: 1rpx solid $color-c2;
        padding-bottom: 20rpx;
        .title {
          font-size: 26rpx;
          color: $color-666;
          margin-top:30rpx;
          margin-bottom:10rpx;
        }
        span {
          height: 70rpx;
          line-height: 70rpx;
          width: 290rpx;
          display: inline-block;
          font-size: 28rpx;
          color: $color-666;
          text-align: center;
          background: $color-fff;
          border: 1rpx solid $color-lightGreen;
          border-radius: 10rpx;
          margin: 20rpx;
          &.on {
            background: $color-lightGreen;
            color: $color-fff;
          }
          &.lose {
            border: 1rpx solid #e4e4e4;
            background: #e4e4e4;
            color: $color-999;
          }
        }
      }
      .show-number {
        height: 148rpx;
        border-bottom: 1rpx solid $color-c2;
        img {
          width: 69rpx;
          height: 60rpx;
        }
        .num {
          width: 67rpx;
          height: 58rpx;
          line-height: 58rpx;
          display: inline-block;
          border: 1rpx solid #b3b3b3;
          background: #f5f5f5;
          color: $color-666;
          font-size: 30rpx;
          text-align: center;
        }
        .operation {
          margin-top: 44rpx;
          padding: 0 2rpx;
        }
        .title {
          font-size:26rpx;
          color:#666666;
          margin-top:45rpx;
          margin-bottom:10rpx;
          span {
            display: block;
            font-size: 24rpx;
            color: #ff2e68;
          }
        }
      }
      .user-name {
        border-bottom:1rpx solid $color-c2;
        height: 100rpx;
        line-height: 100rpx;
        color: $color-666;
        font-size: 28rpx;
        span {
          color: #ff2e68;
          margin-right: 5rpx;
        }
        input {
          height: 100rpx;
          line-height: 100rpx;
          padding-left: 10rpx;
          width: 450rpx;
          display: inline-block;
        }
      }
      .user-iphone {
        border-bottom:1rpx solid $color-c2;
        height: 100rpx;
        line-height: 100rpx;
        color: $color-666;
        font-size: 28rpx;
        span {
          color: #ff2e68;
          margin-right: 5rpx;
        }
        input {
          height: 100rpx;
          line-height: 100rpx;
          padding-left: 10rpx;
          width: 450rpx;
          display: inline-block;
        }
      }
      .pay-order {
        font-size: 28rpx;
        color: $color-666;
        padding: 10rpx 0;
        border-bottom:1rpx solid $color-c2;
        div {
          height: 50rpx;
          line-height: 50rpx;
          span {
            color: $color-333;
          }
        }
      }
      .pay-money {
        text-align: center;
        padding: 50rpx 0;
        .order-money {
          color: #fe3f75;
          font-size: 48rpx;
        }
        .order-name {
          color: $color-999;
          font-size: 28rpx;
        }
        .order-updata {
          color: $color-lightGreen;
          font-size: 30rpx;
        }
      }
    }
    .pay-confirm {
      height: 100rpx;
      line-height: 100rpx;
      background: $color-lightGreen;
      text-align: center;
      font-size: 36rpx;
      color: $color-fff;
      position: fixed;
      z-index: 11;
      width: 100%;
      bottom: 0;
    }
  }
  .showView {
    display: block;
  }
</style>
